﻿<!DOCTYPE html>
<html lang="en">
<head>
    <title id="Description">This demo showcases an Office-like ribbon.</title>
    <meta name="description" content="This demo showcases an Office-like ribbon." />
    <link type="text/css" rel="Stylesheet" href="../../jqwidgets/styles/jqx.base.css" />
    <style type="text/css">
        .button
        {
            margin: 2px;
            margin-right: 0px;
        }
        .smallImages
        {
            width: 13px;
            height: 13px;
        }
        .firstTableDescriptions
        {
            padding-right: 20px;
        }
        .inlineButton
        {
            display: inline-block;
        }
        .sectionSeparator
        {
            width: 1px;
            height: 89px;
            background-color: #eee;
            float: left;
            margin: 10px 5px 0 5px;
        }
        .bigTd
        {
            text-align: center;
            vertical-align: top;
            width: 50px;
        }
        .left
        {
            margin-left: 7px;
        }
        #fileItem.jqx-ribbon-item
        {
            background: #006400;
            color: White !important;
            background-image: none;
            text-shadow:none;
        }
        #fileItem.jqx-ribbon-item-hover
        {
            background: #338333 !important;
            color: White !important;
            text-shadow:none;
        }
        #fileItem.jqx-ribbon-item-selected
        {
            background: #005000 !important;
            color: White !important;
            text-shadow:none;
        }
        #clipBoardTable
        {
            height: 100%;
            border-collapse: separate;
            border-spacing: 0px 0px;
            float: left;
        }
        #jqxgrid
        {
            border-top: none;
            border-top-left-radius: 0px;
            border-top-right-radius: 0px;
        }
        #jqxRibbon,  .jqx-ribbon-content-section {
            border-bottom-right-radius: 0px;
            border-bottom-left-radius: 0px;
        }
        .buttonTopAlign {
            position: relative; top: 9px;
        }
    </style>
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtooltip.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxribbon.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // jqxRibbon code
            $("#jqxRibbon").jqxRibbon({ width: 802, height: 130, animationType: "none", selectionMode: "click", position: "top", mode: "default", selectedIndex: 1,
                initContent: function (item) {
                    switch (item) {
                        case 0:
                            $("#save, #saveAs, #open, #close, #exit").jqxButton({ width: 13, height: 13 });
                            break;
                        case 1:
                            $("#paste").jqxButton();
                            $("#paste").jqxTooltip({ position: "mouse", content: "Paste (Ctrl + V)" });
                            $("#cut, #copy, #bold, #italic, #underline, #strikethrough, #leftAlign, #centerAlign, #rightAlign, #justifyAlign").jqxButton();
                            $("#cut").jqxTooltip({ position: "mouse", content: "Cut (Ctrl + X)" });
                            $("#copy").jqxTooltip({ position: "mouse", content: "Copy (Ctrl + C)" });
                            $("#bold").jqxTooltip({ position: "mouse", content: "Bold (Ctrl + B)" });
                            $("#italic").jqxTooltip({ position: "mouse", content: "Italic (Ctrl + I)" });
                            $("#underline").jqxTooltip({ position: "mouse", content: "Underline (Ctrl + U)" });
                            $("#strikethrough").jqxTooltip({ position: "mouse", content: "Strikethrough" });
                            $("#leftAlign").jqxTooltip({ position: "mouse", content: "Align Text Left (Ctrl + L)" });
                            $("#centerAlign").jqxTooltip({ position: "mouse", content: "Center (Ctrl + E)" });
                            $("#rightAlign").jqxTooltip({ position: "mouse", content: "Align Text Right (Ctrl + R)" });
                            $("#justifyAlign").jqxTooltip({ position: "mouse", content: "Justify (Ctrl + J)" });
                            $("#font").jqxDropDownList({ source: ["<span style='font-family: Courier New;'>Courier New</span>", "<span style='font-family: Times New Roman;'>Times New Roman</span>", "<span style='font-family: Arial;'>Arial</span>"], width: 150, autoDropDownHeight: true, selectedIndex: 1 });
                            $("#fontSize").jqxDropDownList({ source: [8, 10, 12, 14, 18, 24, 36], width: 50, autoDropDownHeight: true, selectedIndex: 1 });
                            break;
                        case 2:
                            $("#help, #about, #update").jqxButton({ width: 26, height: 26 });
                            break;
                    }
                }
            });

            // jqxGrid code
            // renderer for grid cells.
            var numberrenderer = function (row, column, value) {
                return '<div style="text-align: center; margin-top: 5px;">' + (1 + value) + '</div>';
            }
            // create Grid datafields and columns arrays.
            var datafields = [];
            var columns = [];
            for (var i = 0; i < 26; i++) {
                var text = String.fromCharCode(65 + i);
                if (i == 0) {
                    var cssclass = 'jqx-widget-header';
                    if (theme != '') cssclass += ' jqx-widget-header-' + theme;
                    columns[columns.length] = { pinned: true, exportable: false, text: "", columntype: 'number', cellclassname: cssclass, cellsrenderer: numberrenderer };
                }
                datafields[datafields.length] = { name: text };
                columns[columns.length] = { text: text, datafield: text, width: 60, align: 'center' };
            }
            var source =
            {
                unboundmode: true,
                totalrecords: 100,
                datafields: datafields,
                updaterow: function (rowid, rowdata) {
                    // synchronize with the server - send update command   
                }
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
            // initialize jqxGrid
            $("#jqxgrid").jqxGrid(
            {
                width: 800,
                source: dataAdapter,
                editable: true,
                columnsresize: true,
                selectionmode: 'multiplecellsadvanced',
                columns: columns
            });
        });
    </script>
</head>
<body>
    <div id="jqxRibbon">
        <ul>
            <li id="fileItem">File</li>
            <li>Home</li>
            <li>Help</li>
        </ul>
        <div>
            <div style="overflow:hidden;">
                <table style="border-collapse: separate; border-spacing: 0;">
                    <tr>
                        <td>
                            <div id="save" class="button">
                                <img class="smallImages" src="../../images/save-26.png" /></div>
                        </td>
                        <td class="firstTableDescriptions">
                            Save
                        </td>
                        <td>
                            <div id="saveAs" class="button">
                                <img class="smallImages" src="../../images/save_as-26.png" />
                            </div>
                        </td>
                        <td class="firstTableDescriptions">
                            Save As
                        </td>
                        <td>
                            <div id="open" class="button">
                                <img class="smallImages" src="../../images/opened_folder-26.png" />
                            </div>
                        </td>
                        <td class="firstTableDescriptions">
                            Open
                        </td>
                        <td>
                            <div id="close" class="button">
                                <img class="smallImages" src="../../images/folder-26.png" />
                            </div>
                        </td>
                        <td class="firstTableDescriptions">
                            Close
                        </td>
                        <td>
                            <div id="exit" class="button">
                                <img src="../../images/close_window-26.png" class="smallImages" />
                            </div>
                        </td>
                        <td class="firstTableDescriptions">
                            Exit
                        </td>
                    </tr>
                </table>
            </div>
            <div  style="overflow:hidden;">
                <table id="clipBoardTable">
                    <tr>
                        <td rowspan="3" style="text-align: center;">
                            <div id="paste" class="button">
                                <img src="../../images/paste-26.png" />
                                <br />
                                Paste
                            </div>
                        </td>
                        <td>
                            <div style="position: relative; margin-top:9px;" id="cut" class="button inlineButton">
                                <img src="../../images/cut-26.png" class="smallImages" />
                                 Cut
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div style="top:-8px; position: relative;" id="copy" class="button inlineButton">
                                <img src="../../images/copy-26.png" class="smallImages" />
                                 Copy
                            </div>
                        </td>
                    </tr>
                    <tr>
                    </tr>
                    <tr>
                        <td colspan="2" style="text-align: center;">
                            Clipboard
                        </td>
                    </tr>
                </table>
                <div class="sectionSeparator">
                </div>
                <table style="float: left;">
                    <tr>
                        <td colspan="3">
                            <div style="position: relative; top: 9px;" id="font">
                            </div>
                        </td>
                        <td>
                            <div style="position: relative; top: 9px;" id="fontSize">
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="4">
                            <div style="position: relative; top: 5px; left: -2px;" id="bold" class="button inlineButton">
                                <img src="../../images/bold-26.png" class="smallImages" />
                            </div>
                            <div style="position: relative; top: 5px; left: -2px;" id="italic" class="button inlineButton">
                                <img src="../../images/italic-26.png" class="smallImages" />
                            </div>
                            <div style="position: relative; top: 5px; left: -2px;" id="underline" class="button inlineButton">
                                <img src="../../images/underline-26.png" class="smallImages" />
                            </div>
                            <div style="position: relative; top: 5px; left: -2px;" id="strikethrough" class="button inlineButton">
                                <img src="../../images/strikethrough-26.png" style="width: 13px; height: 13px;" />
                            </div>
                        </td>
                    </tr>
                    <tr style="height: 15px;">
                    </tr>
                    <tr>
                        <td colspan="4" style="text-align: center;">
                            Font
                        </td>
                    </tr>
                </table>
                <div class="sectionSeparator">
                </div>
                <table style="float: left;">
                    <tr>
                        <td>
                            <div id="leftAlign" class="button inlineButton buttonTopAlign">
                                <img src="../../images/align_left-26.png" class="smallImages" />
                            </div>
                            <div id="centerAlign" class="button inlineButton buttonTopAlign">
                                <img src="../../images/align_center-26.png" class="smallImages" />
                            </div>
                            <div id="rightAlign" class="button inlineButton buttonTopAlign">
                                <img src="../../images/align_right-26.png" class="smallImages" />
                            </div>
                            <div id="justifyAlign" class="button inlineButton buttonTopAlign">
                                <img src="../../images/align_justify-26.png" class="smallImages" />
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td style="height: 65px; text-align: center; vertical-align: bottom;">
                            Alignment
                        </td>
                    </tr>
                </table>
                <div class="sectionSeparator">
                </div>
            </div>
            <div  style="overflow:hidden;">
                <table style="height: 100%;">
                    <tr>
                        <td class="bigTd">
                            <div id="help" class="button left">
                                <img src="../../images/help-26.png" />
                            </div>
                            Help
                        </td>
                        <td class="bigTd">
                            <div id="about" class="button left">
                                <img src="../../images/about-26.png" />
                            </div>
                            About
                        </td>
                        <td class="bigTd">
                            <div id="update" class="button left">
                                <img src="../../images/downloading_updates-26.png" />
                            </div>
                            Update
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
    <div id="jqxgrid">
    </div>
</body>
</html>
